@use "../../../style/page.scss" as *;


@keyframes desText {
    0% {
        color: $dawn;
        text-shadow: 0 1rem 6rem rgba(247, 244, 237, 0.65);
    }

    33% {
        color: $indigo;
        text-shadow: 0 1rem 6rem rgba(22, 97, 171, 0.65);
    }

    66% {
        color: $sallow;
        text-shadow: 0 1rem 6rem rgba(128, 99, 50, 0.65);
    }

    100% {
        color: $dawn;
        text-shadow: 0 1rem 6rem rgba(247, 244, 237, 0.65);
    }
}

.banner {
    &_yu {
        padding-block-start: 60rem;
        font-size: 80rem;
        color: #fff;
    }
    &_pub {
        position: absolute;
        @extend .flex;
        width: 200rem;
        height: 200rem;
        font-size: 32rem;

        &>span {
            position: absolute;
            z-index: 10;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
    &_rem {
        font-size: 48rem;
        text-align: center;
        white-space: nowrap;
        animation: desText 15s 0s infinite;
        padding-block-start: 35rem;
    }

    &_b {
        padding-block-start: 25rem;
        padding-block-end: 50rem;
    }
}

.en {
    white-space: initial;
    width: 850rem;
    font-size: 42rem;
}

.afflatus {
    padding-block: 48rem;
    &_h3 {
        font-size: 48rem;
    }
    &_hb {
        width: 1400rem;
        border-bottom: 2px solid rgb(255 255 255 / 0.15);
        padding-block-end: 10rem;
    }
    &_h6 {
        width: 1400rem;
        font-size: 20rem;
        padding-block-start: 20rem;
    }
    &_h5 {
        @extend .afflatus_h6;
        font-size: 28rem;
    }
    &_form {
        width: 1400rem;
        padding-block: 48rem;
    }
    &_canvas {
        width: 700rem;
        height: 750rem;
        position: relative;
    }
    &_box {
        background-color: rgba(255, 255, 255, 0.12);
        padding: 30rem 80rem;
        width: 97.5%;
        margin-inline-start: 2.5%;
        border-radius: 8rem;
    }
}

.form {
    width: 700rem;
    padding: 25rem !important;
    background-color: rgba(255, 255, 255, 0.13);
    border-radius: 8rem;
    &_inp {
        height: 48rem;
        font-size: 18rem;
    }
    &_area {
        padding: 15rem 15rem 35rem 15rem;
        font-size: 16rem;
    }
    &_sub {
        margin-block-start: 12rem;
        flex: 1;
        height: 60rem;
        border-radius: 8rem;
        background: rgba(255, 255, 255, 0.2);
        font-size: 18rem;
        &:hover {
            background: rgba(255, 255, 255, 0.22) !important;
        }
        &:active {
            background: rgba(255, 255, 255, 0.3) !important;
        }
    }
}

.box {
    padding-block-start: 48rem;
    &_sch {
        padding-block: 80rem;
    }
    &_container {
        width: 1400rem;
        padding-block-start: 60rem;
    }
}

.scheme {
    width: 100%;
    &_list {
        margin-inline: 16rem;
        margin-block: 15rem;
        width: 120rem;
        height: 120rem;
        border-radius: 50%;
        background-color: rgba($color: #fff, $alpha: 0.15);
        box-shadow: 0 0 12rem rgba($color: #fff, $alpha: 0.15);
        &:hover {
            cursor: pointer;
        }
    }
}

.canvas {
    width: 100%;
    height: 100%;
}